<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          *{
              margin: 0;
              padding: 0;
          }

          .head{
              height: 20%;
              background-color: #0c85d0;
              -moz-border-radius-bottomleft: 50%;
              -moz-border-radius-bottomright: 50%;
              border-bottom-left-radius:10%;
              border-bottom-right-radius:10%;
          }
          #posi{
              height: 100vh;
              background-color: #0b2e13;
              position: absolute;
              left: 0;
               top: 0;
              width: 100%;
              z-index: 1;
          }
         #body {
            display: flex;
             justify-content: center;
          }
         #body div{
             width: 80%;
             background-color: red;
             z-index: 2;
             margin-top: 30px;
         }
    </style>
</head>
<body>
<div id="posi">
    <div class="head"></div>
    <div class="body">

    </div>
</div>
<div id="body">
    <div>
          123
    </div>
</div>
</body>
</html>